<template>
    <div class="swiper">
     <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide v-for="item in imgUrl" :key="item.id" class="list">
        <img  :src="item.url" alt="">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper,swiperSlide} from 'vue-awesome-swiper'
    export default{
        props:{
            swiperList:Object
        },
        data(){
            return{
                swiperOption:{
            pagination:".swiper-pagination",
            loop:true,
            autoplay:3000,
        },
        imgUrl:[
            {id:'00',url:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201910/e7eac5a5e99e6517c61b953c0fece63b.jpg_750x200_4b701cf8.jpg'},
            {id:'01',url:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/14c86b17f55e4b639776b497178f8ef7.jpg_750x200_0d6b121a.jpg'},
            {id:'02',url:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/81f5e1c19d95227c5d9b593dd02de787.jpg_750x200_e1780a55.jpg'},
            {id:'03',url:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/bbe7e1932d46f0480c9d9a5db18862b9.jpg_750x200_22c82912.jpg'}
        ]
            }
        },
        
        props:{
            swiper:Array
        },
        components:{
            swiper,
            swiperSlide
        }
    }
</script>

<style lang="stylus" scoped>
    .list{
        width:100%
    }
    .list img{
        width:100%
    }
</style>
